<template>
    <view class="container">
        <view class="title">
            <view class="large">{{ sysInfo.AdminName }}</view>
            <view class="normal">{{ sysInfo.SystemName }}</view>
        </view>
        <view class="form">
            <uv-form
                labelPosition="left"
                :model="formData"
                :rules="rules"
                ref="formRef"
                labelWidth="150rpx"
                :labelStyle="{ color: '#6a6a6a' }"
            >
                <view class="form_con">
                    <uv-form-item label="用户名" prop="username">
                        <uv-input
                            v-model="formData.username"
                            placeholder="用户名"
                            :customStyle="{ borderRadius: '20rpx' }"
                        ></uv-input>
                    </uv-form-item>
                    <uv-form-item label="密码" prop="password">
                        <uv-input
                            :password="showPassword"
                            v-model="formData.password"
                            placeholder="密码"
                            :customStyle="{ borderRadius: '20rpx' }"
                        >
                            <template #suffix>
                                <uv-icon
                                    size="40rpx"
                                    @click="passwordShow"
                                    :name="
                                        showPassword ? 'eye-off-outline' : 'eye'
                                    "
                                ></uv-icon>
                            </template>
                        </uv-input>
                    </uv-form-item>
                </view>
                <uv-button
                    type="primary"
                    customStyle="margin-top: 20rpx"
                    @click="onSubmit"
                >
                    <view class="fs-24">提交</view>
                </uv-button>
                <view class="toGuest" @click="toGuest">游客访问</view>
            </uv-form>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { login_API } from '@/server/home'
import { useUserStore } from '@/stores'
import { getSysInfo } from '@/utils/util'
const sysInfo = getSysInfo()
// 显示隐藏密码
const showPassword = ref(true)
const passwordShow = () => {
    showPassword.value = !showPassword.value
}
const formData = ref({
    username: '',
    password: '',
    grant_type: 'password',
})
const rules = {
    username: {
        type: 'string',
        required: true,
        message: '请填写用户名',
        trigger: ['blur', 'change'],
    },
    password: {
        type: 'string',
        required: true,
        message: '请填写密码',
        trigger: ['blur', 'change'],
    },
}
const store = useUserStore()
const formRef = ref()
const onSubmit = () => {
    formRef.value
        .validate()
        .then(async () => {
            uni.showLoading({
                title: '登录中...',
                mask: true,
            })
            const res = await login_API(formData.value)
            store.token = res.access_token
            store.isLogin = true
            uni.$uv.toast('登录成功')
            res.access_token && store.getUserInfo()
        })
        .catch((errors) => {
            console.log('errors:', errors)
        })
}

const toGuest = async () => {
    const res = await login_API({
        username: '430524',
        password: '123456',
        grant_type: 'password',
    })
    store.token = res.access_token
    store.isLogin = true
    uni.$uv.toast('登录成功')
    res.access_token && store.getUserInfo()
}
</script>

<style lang="scss" scoped>
page {
    height: 100%;
}
.container {
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url('@/static/img/login/login-bg.png');
    color: rgba(29, 107, 171, 1);
    height: 100%;
    position: relative;
    .title {
        padding-top: 100rpx;
        padding-bottom: 100rpx;
        text-align: center;

        .large {
            font-size: 60rpx;
            font-weight: bold;
        }

        .normal {
            font-size: 40rpx;
        }
    }
    .form {
        // margin: 50rpx;
        // position: absolute;
        // left: 50%;
        // top: 50%;
        // transform: translate(-50%, -50%);
        width: 650rpx;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 30rpx;
        padding: 20rpx 40rpx;
        color: #6a6a6a;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
    }
    .toGuest {
        margin-top: 20rpx;
        color: #409eff;
        text-decoration: underline;
        font-size: 30rpx;
    }
}
</style>
